<template>
  <div id="infos_header">
    <el-tooltip effect="dark" :content="st_name" placement="top">
      <div class="el-dropdown-link">欢迎: {{ st_name }}同学</div>
    </el-tooltip>

    <div class="infos">
      <router-link to="/st_info"> 点击此处，管理个人信息 </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "infos_header",
  data() {
    return {
      st_name: "",
    };
  },
  methods: {
    loadStudentData() {
      this.axios
        .get("http://10.197.43.62:8088/student/studentxx?st_id="+this.st_id)
        .then((res) => {
          this.st_name = res.data[0].st_name;
        });
    },
  },
  mounted() {
    this.loadStudentData();
  },
   computed: {
     st_id() {
      return this.$store.state.st_id;
    },
  },
};
</script>

<style scoped>
a {
  text-decoration: none;
  outline: none;
  color: #000;
}

#infos_header {
  width: 250px;
  float: right;
  margin: 30px;
  
  font-size: 20px;
}

.el-dropdown-link {
  cursor: pointer;
  font-size: 30px;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.infos {
  margin: 15px;
}
</style>
<style>
/* 箭头图标 */
#infos_header .el-icon-arrow-down[data-v-3fbf9317] {
  font-size: 20px;
}
</style>